<template>
  <div class="service">
    <h1 class="service-title">サービス</h1>

    <!-- 上半部分：左侧文字 + 右侧图片 -->
    <section class="service-section">
      <div class="service-text">
        <h2 v-html="serviceData.section1.title"></h2>
        <p v-html="serviceData.section1.content.replace(/&lt;br&gt;/g, '<br>')"></p>
      </div>
      <div class="service-image">
        <img :src="serviceData.section1.thumbnail" alt="Service Image">
      </div>
    </section>

    <!-- 下半部分：图片在左，文字在右 -->
    <section class="service-section reverse">
      <div class="service-image">
        <img :src="serviceData.section2.thumbnail" alt="Service Image">
      </div>
      <div class="service-text">
        <h2 v-html="serviceData.section2.title"></h2>
        <p v-html="serviceData.section2.content.replace(/&lt;br&gt;/g, '<br>')"></p>
      </div>
    </section>
  </div>
</template>

<script>
import { getServiceData } from '@/api'  // 假设存在获取服务数据的接口

export default {
  name: 'ServicePage',
  data() {
    return {
      serviceData: {
        section1: {
          title: "",
        thumbnail: "",
        subtitle: "",
        content: "" 
        },
        section2: {
          title: "",
        thumbnail: "",
        subtitle: "",
        content: "" 
        }
      }
    }
  },
  async mounted() {
    try {
      const data = await getServiceData();
      this.serviceData = {
        section1: {
          ...data.rows[0],
          content: data.rows[0].content.replace(/&lt;br&gt;/g, '<br>')
        },
        section2: {
          ...data.rows[1],
          content: data.rows[1].content.replace(/&lt;br&gt;/g, '<br>')
        }
      };
    } catch (error) {
      console.error('Error fetching service data:', error);
    }
  }
}
</script>

<style scoped>
/* 整个页面样式 */
.service {
  
  background: linear-gradient(135deg, 
    #fff 0%, 
    #fff9f0 30%, 
    #fff0f5 70%, 
    #fff 100%);
    padding: 1px 20%;
}

/* 标题 "SERVICE" 居中 */
.service-title {
  text-align: center;
  font-size: 36px;
  margin: 40px 0;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif; /* 添加黑体字体 */
  font-weight: 400; /* 取消加粗 */
  color: #666;
}



/* 每个服务模块 */
.service-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 70px 10%;
  position: relative;
}

.service-section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(248,215,163,0) 0%, 
    rgba(248,215,163,0.5) 50%, 
    rgba(248,215,163,0) 100%);
}

.service-section:last-child::before {
  display: none;
}

/* 下半部分：图片在左，文字在右 */
.service-section.reverse {
  flex-direction: row; /* 修改为 row */
}

/* 如果不需要 .reverse 的特定规则，可以直接用 .service-section */
.service-section .service-text {
  flex: 0.5;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #555;
}

.service-section .service-text h2 {
  font-size: 1.9rem;
  margin-bottom: 25px;
  font-family: "HiraMinProN-W3", "Hiragino Mincho Pro", serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #2a2a2a;
  position: relative;
  padding-bottom: 15px;
}

.service-section .service-text h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, #f8d7a3, #f5b8ca);
}

.service-section .service-image {
  flex: 0.6;
  transition: all 0.3s ease;
}

.service-section .service-image img {
  width: 100%;
  max-height: 550px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

.service-section .service-image img:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  transform: scale(1.02);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .service-section {
    flex-direction: column;
    gap: 40px;
    padding: 50px 8%;
  }
  
  .service-text, 
  .service-image {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .service {
    padding: 0 0%; /* 减少两侧间距 */
  }

  .service-title {
    font-size: 1.8rem;
    margin: 30px 0;
  }

  .service-section {
    flex-direction: column;
    padding: 0 0 40px 0; /* 调整底部间距 */
  }

  .service-section.reverse {
    flex-direction: column; /* 取消reverse效果，统一图片在上 */
  }

  .service-image {
    order: -1; /* 确保图片始终在最上方 */
    margin-bottom: -50px;
  }

  .service-text, 
  .service-image {
    width: 100%;
  }

  .service-text h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
  }

  .service-text p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .service-image img {
    max-height: 300px; /* 限制图片高度 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  }

  .service-section::before {
    width: 100%;
    left: 0;
  }
}

@media (max-width: 768px) {
  .service-title {
    display: none; /* 隐藏标题 */
  }

  .service-section:first-child {
    padding-top: 20px; /* 第一个内容块顶部间距调整 */
  }

  .service-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* 推荐加这个让移动端比例更统一 */
  object-fit: cover;
  border-radius: 8px;
}

.service-text p {
  font-size: 0.8rem;
  line-height: 1.8;
  margin-bottom: 1.2em;
}
.service-text{
  width: 88%;
}


  .service-title {
    display: none;
  }
  .service-section {
  padding-bottom: 60px;
}


}
</style>
